import React from "react";

import './reg.css';
import UcNavbar from "../../components/uc-navBar/uc-navBar";
import { Link } from 'react-router-dom'
import UcInput from "../../components/uc-input/index";
import UcButton from "../../components/uc-button/uc-button";
import { queryLogin, queryReg } from "../../services/user";
import qs from 'qs';


// export default class Reg extends React.Component {


//   state = {
//     username: '',
//     password: '',
//     mess: '',//错误信息
//   };

//   checkIpt = ev => this.setState({ [ev.target.name]: ev.target.value });

//   reg = async () => {
//     let { username, password } = this.state;

//     let icon = this.file;

//     let res = await queryReg({ username, password, icon })

//     if (res.err === 0) {
//       this.props.history.push('/login')
//     } else {
//       this.setState({ mess: res.msg })
//     }


//   };

//   async componentDidMount() {

//   }

//   render() {

//     let { username, password, mess } = this.state;

//     return (

//       <div className="content">

//         <UcNavbar
//           onLeftClick={() => this.props.history.go(-1)}
//           icon={<img alt="arrow" src={require('../../assets/img/history1.png').default} />}
//         />

//         <h1 onClick={() => this.file.click()}></h1>

//         <input type="file" ref={el => this.file = el} style={{ display: 'none' }} />

//         <div className="login-box">
//           <p className="lsolid"></p>
//           <div className="login">
//             <Link to="/login">登录</Link>
//             <span></span>
//             <Link to="/reg">注册</Link>
//           </div>
//           <p className="rsolid"></p>
//         </div>
//         <ul>
//           <UcInput
//             label="账号"
//             model={{ name: "username", value: username, onChange: this.checkIpt }}
//           />
//           <UcInput
//             label="密码"
//             type="password"
//             model={{ name: "password", value: password, onChange: this.checkIpt }}
//           />
//           {mess}
//         </ul>
//         <div className="footbox" style={{ marginTop: '0.5rem' }}>
//           <UcButton size="large" onClick={this.reg}>注册</UcButton>
//           <a className="tishi">忘记密码？</a>
//         </div>
//       </div>

//     );
//   }
// }

export default class Reg extends React.Component {


  state = {
    username: '',
    password: '',
    mess: '',//错误信息
  };

  checkIpt = ev => this.setState({ [ev.target.name]: ev.target.value });

  reg = async () => {
    let { username, password } = this.state;

    let icon = this.file;

    let res = await queryReg({ username, password, icon })

    if (res.err === 0) {
      this.props.history.push('/login')
    } else {
      this.setState({ mess: res.msg })
    }


  };

  async componentDidMount() {

  }

  render() {

    let { username, password, mess } = this.state;

    return (

      <div className="content">

        <UcNavbar
          onLeftClick={() => this.props.history.go(-1)}
          icon={<img alt="arrow" src={require('../../assets/img/history1.png').default} />}
        />

        <h1 onClick={() => this.file.click()} style={{ textAlign: 'center', lineHeight: '70px' }}>注册</h1>

        <input type="file" ref={el => this.file = el} style={{ display: 'none' }} />

        <div className="login-box">
          <p className="lsolid"></p>
          <div className="login">
            <Link to="/login">登录</Link>
            <span></span>
            <Link to="/reg">注册</Link>
          </div>
          <p className="rsolid"></p>
        </div>
        <ul>
          <UcInput
            label="账号"
            model={{ name: "username", value: username, onChange: this.checkIpt }}
          />
          <UcInput
            label="密码"
            type="password"
            model={{ name: "password", value: password, onChange: this.checkIpt }}
          />
          {mess}
        </ul>
        <div className="footbox" style={{ marginTop: '0.5rem' }}>
          <UcButton size="large" onClick={this.reg}>注册</UcButton>
          <a className="tishi">忘记密码？</a>
        </div>
      </div>

    );
  }
}
